<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>霓虹炫彩弹幕墙（已修复）</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    body {
      background: radial-gradient(circle at center, #0f0c29, #302b63, #24243e);
      color: #fff;
      font-family: 'Orbitron', sans-serif;
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      box-sizing: border-box;
    }
    h1 { margin: 16px 0; text-shadow: 0 0 15px #0ff, 0 0 25px #0ff; }
    #video-container {
      position: relative;
      width: 90%;
      max-width: 900px;
      height: 450px;
      background: #000;
      border: 2px solid #0ff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 0 30px #0ff;
    }
    .bullet {
      position: absolute;
      white-space: nowrap;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 0 8px #ff00de, 0 0 12px #00f0ff;
      padding: 5px 12px;
      border-radius: 25px;
      cursor: pointer;
      user-select: none;
      background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      box-shadow: 0 2px 8px rgba(0,0,0,0.6);
      transition: transform 0.12s ease;
      will-change: transform, left;
    }
    .bullet:hover { transform: scale(1.05); }
    .input-section {
      margin-top: 12px;
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .input-section input {
      padding: 10px 14px;
      border-radius: 30px;
      border: 2px solid #0ff;
      background: rgba(0,0,0,0.7);
      color: #0ff;
      width: 260px;
      outline: none;
      box-shadow: 0 0 10px #0ff;
    }
    .input-section button {
      padding: 10px 18px;
      border-radius: 30px;
      border: none;
      cursor: pointer;
      background: linear-gradient(45deg, #ff00de, #00f0ff);
      color: white;
      font-weight: bold;
    }
    .history { margin-top: 12px; display:flex; flex-wrap:wrap; gap:8px; max-width:900px; }
    .history-item { background: rgba(0,255,255,0.12); padding:6px 10px; border-radius:12px; cursor:pointer; color: #cfeff; }
    /* 提示文字小屏适配 */
    @media (max-width: 480px) {
      .input-section input { width: 160px; font-size: 14px; }
      .bullet { font-size: 16px; padding: 4px 10px; }
    }
  </style>
</head>
<body>
  <h1>🌌 霓虹炫彩弹幕墙</h1>

  <div id="video-container" aria-label="弹幕区"></div>

  <div class="input-section">
    <input id="msgInput" type="text" placeholder="输入弹幕，回车发送..." />
    <button id="sendBtn">发射</button>
  </div>

  <div class="history" id="history"></div>

<script>
/*
 修复说明：
 - 用 requestAnimationFrame + 时间差(dt秒) 来计算位移（px/秒），平滑且不受帧率影响。
 - 将初始 left 设为 container.clientWidth + margin，确保从“完全看不见的右侧”开始。
 - top 用（containerHeight - bulletHeight）范围随机，避免超出底部。
 - 悬浮减速逻辑改为：速度除以 slowdownFactor（真正减速）。
*/

// DOM
const container = document.getElementById('video-container');
const input = document.getElementById('msgInput');
const btn = document.getElementById('sendBtn');
const historyBox = document.getElementById('history');

// 参数（可按需调整）
let speedPxPerSec = 280;   // 基础速度：像素/秒；调大弹幕更快
const slowdownFactor = 4;  // 悬浮时的减速系数（4 => 速度变为 1/4）
const startMargin = 20;    // 从右侧再往外多少像素开始（保证完全不可见）
const removeMargin = 2;    // 移除判定的额外容差

// 发送一条弹幕
function send(text, color = '#0ff') {
  if (!text) return;
  const bullet = document.createElement('div');
  bullet.className = 'bullet';
  bullet.textContent = text;
  bullet.style.color = color;

  // 先加入 DOM 才能测量尺寸
  container.appendChild(bullet);

  // 计算垂直位置：确保不超出底部
  const maxTop = Math.max(0, container.clientHeight - bullet.offsetHeight - 6);
  const top = Math.random() * maxTop;
  bullet.style.top = Math.round(top) + 'px';

  // 初始从完全右侧外面开始
  let left = container.clientWidth + startMargin;
  bullet.style.left = left + 'px';

  // 状态
  bullet._isHovered = false;
  bullet._rafId = null;

  // 鼠标事件：悬浮时减速
  bullet.addEventListener('mouseenter', () => { bullet._isHovered = true; });
  bullet.addEventListener('mouseleave', () => { bullet._isHovered = false; });

  // 点击移除
  bullet.addEventListener('click', () => {
    cancelAnimationFrame(bullet._rafId);
    if (bullet.parentNode) bullet.parentNode.removeChild(bullet);
  });

  // 动画循环（基于时间差）
  let lastTime = null;
  function frame(time) {
    if (!lastTime) lastTime = time;
    const dt = (time - lastTime) / 1000; // 秒
    lastTime = time;

    // 当前速度（悬浮时减速）
    const curSpeed = bullet._isHovered ? (speedPxPerSec / slowdownFactor) : speedPxPerSec;
    left -= curSpeed * dt; // 按秒计算像素位移
    bullet.style.left = Math.round(left) + 'px';

    // 当弹幕完全移出左侧时移除
    if (left + bullet.offsetWidth < -removeMargin) {
      // 移除元素并停止循环
      if (bullet.parentNode) bullet.parentNode.removeChild(bullet);
      return;
    }

    bullet._rafId = requestAnimationFrame(frame);
  }
  bullet._rafId = requestAnimationFrame(frame);

  // 添加历史
  addHistory(text);
}

// 历史记录
function addHistory(text) {
  const item = document.createElement('div');
  item.className = 'history-item';
  item.textContent = text;
  item.onclick = () => { input.value = text; input.focus(); };
  historyBox.appendChild(item);
  if (historyBox.children.length > 12) historyBox.removeChild(historyBox.firstChild);
}

// 绑定 UI
btn.addEventListener('click', () => {
  const v = input.value.trim();
  if (!v) return;
  send(v);
  input.value = '';
  input.focus();
});
input.addEventListener('keydown', e => { if (e.key === 'Enter') btn.click(); });

// 示例弹幕（测试）
setTimeout(()=>send('欢迎来到弹幕墙', '#ff00de'), 300);
setTimeout(()=>send('悬浮可减速（鼠标移上试试）', '#00f0ff'), 1000);
setTimeout(()=>send('速度参数：speedPxPerSec 可调整（默认 280 px/s）', '#7C4DFF'), 1800);

// 可选：在窗口尺寸变化时确保容器内位置仍合理（不必须，但更稳）
window.addEventListener('resize', () => {
  // 这里不需要重排已有弹幕，但如果你想避免弹幕跑到容器外，可在 resize 时进行额外处理
});
</script>
</body>
</html>
